<template>
  <div class="col-md-12">
    <div class="col-md-3 border border-dark bg-light" style="z-index: 100;position: absolute; right: 5px; top: 5px"
         v-if="isShow">
      <h5 class="text-center">{{selectedNodeName}}</h5>
      <p><b>Type:</b> {{selectNodeType}}</p>
      <p><a href='#'>More details...</a></p>
    </div>
    <svg></svg>
  </div>
</template>

<script>
import RelationChart from '../../assets/relation-chart'
import PubSub from 'pubsub-js'

window.nodeInfo = { name: '', type: '' }

export default {
  name: 'RelationGraph',
  data () {
    return {
      nodes: [],
      edges: [],
      nodeInfo: window.nodeInfo,
      selectedNodeName: '',
      selectNodeType: '',
      isShow: false
    }
  },
  mounted () {
    PubSub.subscribe('relChartData', (msg, data) => {
      this.nodes = data.nodes
      this.edges = data.edges
      RelationChart.GenerateGraph(this.nodes, this.edges, data.config)
    })
  },
  watch: {
    nodeInfo: {
      handler (newValue) {
        this.selectedNodeName = newValue.name
        this.selectNodeType = newValue.type
        this.isShow = true
      },
      deep: true
    }
  }
}
</script>

<style scoped>

</style>
